<!DOCTYPE html>
<html th:with="title='设备分布'">
<head>
<meta charset="UTF-8">


<style>
* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
	width: 100%;
}

#china-map {
	width: 100%;
	height: 100%;
	background: #333;
	color: #fff;
}
</style>
</head>
<body>

	<div id="china-map"></div>
	<!-- <script type="text/javascript" src="/js/lib/echarts/3/echarts.js"></script>  -->
	<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.js"></script>
	<script type="text/javascript" src="/js/lib/echarts/3/china.js"></script>
	<script type="text/javascript" src="/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="/js/lib/layer/2.1/layer.js"></script>
	<script type="text/javascript" src="/js/lib/echarts/3/city.js"></script>


	<script type="text/javascript" src="/js/lib/laypage/1.3/laypage.js"></script>
	<script type="text/javascript" src="/js/lib/vuejs/1.0.26/vue.min.js"></script>
	<script type="text/javascript" src="/js/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="/js/lib/jquery.json/jquery.json-2.4.js"></script>
	<script type="text/javascript" src="/js/lib/layer/2.1/layer.js"></script>
	<script type="text/javascript" src="/js/lib/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="/js/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script>
		$(function() {
			var data;

			$.ajax({
				type : "POST",
				url : '/manager/device/getCityCount',
				data : {
					pageNo : 1,
					pageSize : 10
				},

				error : function(request) {
					alert("系统错误");
				},
				success : function(result) {
					data = result.data
					var myChart = echarts.init(document.getElementById('china-map'));
					var convertData = function(data) {
						var res = [];
						for (var i = 0; i < data.length; i++) {
							var geoCoord = geoCoordMap[data[i].name];
							if (geoCoord) {
								res.push({
									name : data[i].name,
									online : data[i].online,
									offline : data[i].offline,
									value : geoCoord.concat(data[i].value)
								});
							}
						}
						return res;
					};

					option = {
						backgroundColor : '#404a59',
						title : {
							text : '广投墙设备云端',
							subtext : '',
							sublink : '/manager/device/gotolist',
							x : 'center',
							textStyle : {
								color : '#fff'
							}
						},
						tooltip : {
							trigger : 'item',
							formatter : function(params) {
								return params.name + ' ,设备在线数量: ' + params.data.online + ' ,设备离线数量: ' + params.data.offline;
							}
						},
						legend : {
							orient : 'vertical',
							y : 'bottom',
							x : 'right',
							data : [ '设备数量' ],
							textStyle : {
								color : '#fff'
							}
						},
						geo : {
							map : 'china',
							label : {
								emphasis : {
									show : false
								}
							},
							roam : true,
							layoutCenter : [ '100%', '100%' ],
							itemStyle : {
								normal : {
									areaColor : '#323c48',
									borderColor : '#111'
								},
								emphasis : {
									areaColor : '#2a333d'
								}
							}
						},
						series : [ {
							name : 'pm2.5',
							type : 'scatter',
							coordinateSystem : 'geo',
							data : convertData(data),
							symbolSize : 12,
							label : {
								normal : {
									show : false
								},
								emphasis : {
									show : false
								}
							},
							itemStyle : {
								emphasis : {
									borderColor : '#fff',
									borderWidth : 1
								}
							}
						}, {
							name : 'Top 5',
							type : 'effectScatter',
							coordinateSystem : 'geo',
							data : convertData(data.sort(function(a, b) {
								return b.value - a.value;
							}).slice(0, 6)),
							symbolSize : function(val) {
								return val[2] * 10;
							},
							showEffectOn : 'render',
							rippleEffect : {
								brushType : 'stroke'
							},
							hoverAnimation : true,
							label : {
								normal : {
									formatter : '{b}',
									position : 'right',
									show : true
								}
							},
							itemStyle : {
								normal : {
									color : '#f4e925',
									shadowBlur : 10,
									shadowColor : '#333'
								}
							},
							zlevel : 1
						} ]
					};

					myChart.setOption(option);
					myChart.on('mouseover', function(params) {
						var dataIndex = params.dataIndex;
					});
					myChart.on('click', function(params) {
						name = params.name;
						window.location = '/manager/device/gotolist?name=' + name;
						//layer_full('设备管理','/manager/device/list','',name);

					});

				}
			})

		})
	</script>

</body>
</html>